import * as THREE from "three";
//导入轨道
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
//导入动画库
import gsap from "gsap";
//导入dat.gui
import * as dat from "dat.gui"


//1.创建场景
const scene = new THREE.Scene()

//2.创建相机
//透视相机
//                                       角度
const camera = new THREE.PerspectiveCamera(90, window.innerHeight / window.innerHeight,
    0.1,
    1000
)
//设置相机位置参数
camera.position.set(0, 0, 10);

//添加相机到场景当中
scene.add(camera);


//目标  打造酷炫的三角形
for (var i = 0; i < 50; i++) {
    //每个三角形，循环三个顶点 每个顶点需要三个值
    const geometry = new THREE.BufferGeometry();
    const postionArray = new Float32Array(9);
    for (let j = 0; j < 9; j++) {
        postionArray[j] = Math.random() * 5
    }

    let color=new THREE.Color(Math.random(0-1),Math.random(0-1),Math.random(0-1));
    geometry.setAttribute("position", new THREE.BufferAttribute(postionArray, 3))
    // 设置材质
    const CubeMeterial = new THREE.MeshBasicMaterial({
        color: color,
        transparent:true,
        opacity:0.5
    })
    //重新创建物体
    const mesh = new THREE.Mesh(geometry, CubeMeterial);
    console.log(mesh);
    scene.add(mesh);

}





//模拟坐标
const axesHelper = new THREE.AxesHelper(5)

// 将几何体添加到场景当中
// scene.add(cube);
//添加坐标轴
scene.add(axesHelper);

//初始化渲染器
const renderer = new THREE.WebGL1Renderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerWidth);


//将渲染的内容添加到画布上
document.body.appendChild(renderer.domElement);

//使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);

//创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
//设置轨道控制器的阻尼,必须要在动画循环里面调用update()
controls.enableDamping = true;

//设置时钟
const clock = new THREE.Clock();


function render(time) {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

render();